<script setup>
import { ref } from "vue";

const props = defineProps({
  searchFunc: Function,
  value: String
});
const searchList = ['职位','公司','岗位要求'];
const curTag = ref(0);
const isShowList = ref(false);
const inputVal = ref(props.value ? props.value : "");
const dosearch = () => {
  props.searchFunc && props.searchFunc(inputVal.value,curTag.value);
}

const handleChange=(index)=>{
  curTag.value = index;
  isShowList.value=!isShowList.value;
}

</script>

<template>
  <div class="search-box">
    <span class="search-key" @click="isShowList=!isShowList">
      {{ searchList[curTag] }}
      <el-icon style="position: relative;top: 2px;">
        <CaretBottom />
      </el-icon>
    </span>
    <div class="list" v-show="isShowList" >
      <div class="list-item" :key="index" v-for="(item,index) in searchList" @click="handleChange(index)">{{ item }}</div>
    </div>
    <el-input v-model="inputVal" @click="isShowList=false" placeholder="搜索职位、公司、岗位要求" class="search-input" />
    <span class="search-text" @click="dosearch">搜索</span>
  </div>
</template>

<style scoped>
.list {
  position: absolute;
  z-index: 99;
  top: 77px;
  width: 100px;
  height: 115px;
  background-color: #409eff;
  border-radius: 5px;
  padding: 5px;
}

.list-item {
  line-height: 38px;
  position: relative;
  height: 38px;
  text-align: center;
  color: white;
  cursor: pointer;
}
.list-item:hover{
  background-color: #a0cfff;
  color: black;
}

.search-box {
  display: flex;
  flex-direction: row;
  width: 900px;
  height: 54px;
  background-color: #409eff;
  border-radius: 20px;
  border: 1px solid #409eff;
  margin-top: 20px;
}

.search-input {
  margin-left: 1px;
  width: 700px;
  height: 54px;
  border-color: white;
}

.select-item {
  cursor: pointer;
  background-color: #409eff;
}

.el-popover {
  padding: 0;
}

.search-key {
  width: 100px;
  font-size: 16px;
  height: 54px;
  padding-left: 10px;
  line-height: 54px;
  text-align: center;
  font-weight: 500;
  background-color: #409eff;
  color: white;
  border-top-left-radius: 19px;
  border-bottom-left-radius: 19px;
  /* cursor: pointer; */
}

.search-key:hover {
  font-size: 18px;
}

.el-input {
  --el-input-border-color: #cfcfcf;
}

.search-text {
  width: 100px;
  font-size: 18px;
  line-height: 54px;
  color: white;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
}

.search-text:hover {
  font-size: 22px;
}
</style>
